<template>
  <div class="read-home-wrap">
    <div class="home-content">
      <span class="base-color back-arrow" @click="() => this.$router.push('/')">
      </span>
      <div class="home-head">
        <div class="read-logo">
          <img src="~assets/super-read/index-logo.png" alt="" />
        </div>
        <p class="checkcourse-title" @click="fetchMyCourse">
          <span class="title-color">{{
            lastStudy.title || "请先选择课程"
          }}</span>
          <a-icon class="base-color" type="right" />
        </p>
      </div>
      <div class="home-center">
        <div class="read-item" @click="goList(1)">
          <img src="~assets/super-read/index-read.png" alt="" />
        </div>
        <div class="read-item" @click="goList(6)">
          <img src="~assets/super-read/index-blank.png" alt="" />
        </div>
      </div>
      <div class="home-bottom">
        <div class="read-process">
          <span
            class="processed"
            :style="{ width: statics.read_percent + '%' }"
          ></span>
          <div class="process-text">
            <span>阅读理解</span>
            <span class="process-num">{{ statics.read_percent || 0 }}%</span>
          </div>
        </div>
        <span class="total"
          >总用时 <i>{{ statics.time }}h</i></span
        >
        <div class="blank-process">
          <span
            class="processed"
            :style="{ width: statics.tk_percent + '%' }"
          ></span>
          <div class="process-text">
            <span>完形填空</span>
            <span class="process-num">{{ statics.tk_percent || 0 }}%</span>
          </div>
        </div>
      </div>
    </div>
    <moreModal
      :visible.sync="moreModalVisible"
      :courseList="courseList"
      @choseClick="readChose"
    />
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import {
  fetchMyLastCurr,
  fetchMyCurr,
  fetchReadStatics,
} from "@/services/super-read";
import moreModal from "./moreModal";
import { SUCCESS_CODE } from "@/utils/const";
import { mapState, mapMutations } from "vuex";
    import Timetips from "@/components/Timetips";
export default {
  name: "superRead",
  components: {
    moreModal,
    Timetips
  },
  data() {
    return {
      lastStudy: {},
      courseList: [],
      moreModalVisible: false,
      statics: {},
    };
  },
  async created() {
    let { last_unit, curr_id,  pack_name,course_type } = this.$route.query;
    this.init();
  },
  computed: {
    ...mapState({
      readCourseInfo: (state) => state.readCourseInfo,
    }),
  },
  methods: {
    ...mapMutations(["setReadCourseInfo"]),
    init() {
      fetchMyLastCurr({
        type: "1",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          if (!res.data.length) {
            this.setReadCourseInfo({});
            this.fetchMyCourse()
          } else {
            let current = res.data[0];
            let result = Object.assign(current, { title: current.level_title });
            this.lastStudy = result;
            this.setReadCourseInfo(result);
            this.fetchStatics(current.id);
          }
        }
      });
    },
    fetchStatics(id) {
      fetchReadStatics({ curriculum_id: id }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.statics = res.data;
        }
      });
    },
    fetchMyCourse() {
      fetchMyCurr({
        type: 1,
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          if (res.data.length) {
            this.moreModalVisible = true;
            this.courseList = res.data;
          } else {
            this.$message.error("您先购买课程~");
          }
        }
      });
    },
    readChose(item) {
      this.moreModalVisible = false;
      this.lastStudy = item;
      console.log(item,'~~~~~~~~~~~~~~~~~~~~~~~');
      this.setReadCourseInfo(item);
      this.fetchStatics(item.id);
    },
    goList(type) {
      if (!this.readCourseInfo.id) {
        this.$message.error("您先选择课程~");
      } else {
        this.setReadCourseInfo(Object.assign(this.readCourseInfo, { type }));
        this.$router.push({
          path: "/super-read/check-point",
          query: { type: type },
        });
      }
    },
  },
  mounted() {
  },  
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less">
@import url("./index.less");
</style>
